const path = require('path');
// 提取css的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ClearWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
function resolve(dir) {
  return path.join(__dirname, '.', dir)
}

module.exports = {
  entry: ['./js/main.js','./index.js'],
  output: {
    filename: 'bundle.js',
    // 将输出的文件都放在dist目录下
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist'
  },
  mode: 'development',
  module: {
    rules: [
      {
        // 使用正则去匹配要用该loader转换的css文件
        test: /\.css$/,
        loaders: ExtractTextPlugin.extract({
          // 转换 .css文件需要使用的Loader
          use: ['css-loader']
        })
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
        use: ['url-loader']
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/, // 排除文件
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      mui: "mui",
      "window.mui": "mui"
    }),

    // new ClearWebpackPlugin(['dist']),
    new ExtractTextPlugin({
      // 从js文件中提取出来的 .css文件的名称
      filename: `main.css`
    }),

    new HtmlWebpackPlugin({
      filename: 'index.html', // pages\about.html
      template: path.resolve(__dirname, 'index.html'), //  H:\kaiking\study\webpackTest03\src\pages\about\html\index.html
      inject: true,
      hash: true,
      // excludeChunks: excludeChunksArr, // 排除指定的模快
      minify: { // 压缩HTML文件
        removeAttributeQuotes: true, //删除属性双引号
        removeComments: true, // 移除注释
        collapseWhitespace: true, // 压缩空白
        removeRedundantAttributes: true, // 当值匹配默认值时删除属性
        useShortDoctype: true, // 使用短的doctype替代doctype
        removeEmptyAttributes: true, // 移除空属性
        removeStyleLinkTypeAttributes: true, // 从style和link标签中删除type='text/css'
        keepClosingSlash: true, // 保留单例元素的末尾斜杠。
        minifyJS: true, // 在脚本元素和事件属性中缩小JavaScript(使用UglifyJS)
        minifyCSS: true, // 压缩内联css
        minifyURLs: true // 在各种属性中缩小url
      }
    })
  ],
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      // 'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      // 定义别名和插件位置
      'mui': path.resolve(__dirname, './js/lib/mui/js/mui.js')
    }
  },
  externals: {
    jquery: 'jQuery'
  },
  devtool: 'source-map',
  devServer: {
    hot: true,
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 8072
  }
};